<template>
	<view style="width: 100%;">
		<view class="noDataView" :style="{'margin-top':marginTop + 'rpx','margin-bottom':marginBot + 'rpx'}">
			<image v-if="!pad" class="noDataImg" :src="imgSrc" mode="widthFix" :style="{width:imgWidth + 'rpx',height:imgHeight + 'rpx'}"></image>
			<image v-else class="noDataImg" :src="imgSrc" mode="widthFix" style="width: 220rpx;height: 220rpx;"></image>
			<view class="noDataTxt">{{noDataTxt}}</view>
			<view class="smTips" v-if="smTips != ''" @tap="goSmTipsEvent">{{smTips}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			noDataTxt:{
				type:String,
				default:'暂无记录'
			},
			marginTop:{
				type:Number,
				default:180
			},
			imgWidth:{
				type:Number,
				default:350
			},
			imgHeight:{
				type:Number,
				default:350
			},
			marginBot:Number,
			imgSrc:{
				type:String,
				default:'/static/images/noData.png'
			},
			smTips:String
		},
		data() {
			return {
				src:'/static/images/noData.png'
			}
		},
		methods: {
			goSmTipsEvent(){
				this.$emit('goSmTipsEvent');
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.noDataView{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* #ifdef APP-NVUE */
		margin-top: 260rpx;
		/* #endif */
	}
	.noDataTxt{
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color:$pss-text-color8;
		@include respTo(phone){
			font-size: $font-size30;
		}
		@include respTo(pad){
			font-size: $padSize16;
		}
	}
	.smTips{
		width: 100%;
		color:$pss-text-colora;
		padding-bottom: 20rpx;
		@include respTo(phone){
			font-size: $font-size28;
		}
		@include respTo(pad){
			font-size: $padSize14;
		}
	}
</style>
